<template>
  <div class="ship-his-setting-container">
    <div class="time-range-select">
      <el-date-picker
        v-model="timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm"
        format="yyyy-MM-dd HH:mm"
      >
      </el-date-picker>
    </div>
    <div class="btn-list">
      <el-button type="primary" class="btn btn-ok" @click="okClick"
        >查询</el-button
      >
      <el-button type="primary" class="btn btn-cancel" @click="cancelClick"
        >取消</el-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      timeRange: [],
    };
  },
  mounted() {
    this.initTimeRange();
  },
  methods: {
    cancelClick() {
      this.$emit("cancel");
    },
    okClick() {
      if (this.timeRange && this.timeRange.length == 2) {
        this.$emit("ok", this.timeRange);
      } else {
        this.$message.warning("请选择时间范围");
      }
    },
    initTimeRange() {
      const endTime = new Date();
      const endTimeFormat = this.$utils.parseTime(
        endTime,
        "{y}-{m}-{d} {h}:{i}"
      );
      const startTime = new Date(endTime.getTime() - 1000 * 60 * 60 * 24 * 7);
      const startTimeFormat = this.$utils.parseTime(
        startTime,
        "{y}-{m}-{d} {h}:{i}"
      );
      this.timeRange = [startTimeFormat, endTimeFormat];
    },
  },
};
</script>

<style lang="scss" scoped>
.ship-his-setting-container {
  padding: 20px 9px;

  .time-range-select {
    display: flex;
    justify-content: center;
    padding: 10px 21px 29px 21px;
    border-bottom: 1px solid #d8d8d8;
  }

  .btn-list {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    .btn {
      padding: 8px 11px;
      width: 80px;
    }
    .btn-ok {
      background: #004aaa;
      border-color: #004aaa;
      margin-right: 37px;
    }
    .btn-cancel {
      background: #d8d8d8;
      border-color: #d8d8d8;
    }
  }
}
</style>
